<template>
	<view :class="isHasDataFlag && payStatus == 0 ? 'hasPaddBot' : ''">
		<tab-nav :orderStaIndex="orderStaIndex" :orderStaArr="orderStaArr" @switchStatus="switchStatus"></tab-nav>
		<template v-if="isHasDataFlag">
			<order-list :orderList="orderList" :payStatus="payStatus" @goOrderDet="goOrderDet" @cancelOrder="cancelOrder" @goPay="goPay"></order-list>
			<loading-view :loading="loading"></loading-view>
			<order-tips v-if="payStatus == 0"></order-tips>
		</template>
		<template v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</template>
		<common-alert :showAlertFlag="showAlertFlag">
			<view class="alertContent">是否确认取消该订单?</view>
			<view class="tui-alert-btn" :hover-stay-time="150">
				<view class="cancelBtn zx" @tap.stop="cancelDel">取消</view>
				<button :disabled="isDisOrderFlag" class="sureBtn zx" @tap="sureFun">确认</button>
			</view>
		</common-alert>
	</view>
</template>

<script>
	import TabNav from '@/components/tab-nav/tab-nav.vue'
	import OrderList from './components/OrderList.vue'
	import { getStudyBuyOrderPage,cancelStudyOrder } from '@/api/zhuxue'
	export default {
		components:{
			TabNav,
			OrderList
		},
		data() {
			return {
				orderStaArr:[
					{id:0,name:'待支付'},
					{id:2,name:'已完成'},
					{id:1,name:'已取消'}
				],
				orderStaIndex:0,
				isHasDataFlag:null,
				orderList:[],
				payStatus:0,
				nowPage:1,
				loading:false,
				showAlertFlag:false,
				isDisOrderFlag:false,
				currOrderId:0
			}
		},
		onLoad(){
			this.loadOrderList();
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading ){
				this.loadOrderList();
			}
		},
		methods: {
			goPay(item){
				var vipEndDate = item.startDate + '至' + item.endDate;
				uni.navigateTo({
					url:'/pages/subIndex/orderPayZx/orderPayZx?orderId=' + item.id + '&buyDays=' + item.buyDays + '&vipEndDate=' + vipEndDate + '&fromPage=zxOrder'
				})
			},
			goOrderDet(id,buyDays){
				uni.navigateTo({
					url:'/pages/subIndex/orderDet/orderDet?orderId=' + id + '&buyDays=' + buyDays
				})
			},
			cancelOrder(orderId){
				this.currOrderId = orderId;
				this.showAlertFlag = true;
			},
			sureFun(){
				var field = {id:this.currOrderId};
				uni.showLoading({ title: '取消中...', mask: true });
				this.isDisOrderFlag = true;
				cancelStudyOrder(field).then(res=>{
					this.util.showToastSuc('取消成功');
					setTimeout(()=>{
						this.isDisOrderFlag = false;
						this.currOrderId = '';
						this.showAlertFlag = false;
						this.initParams();
					},1500);
				}).catch(err=>{console.log(err);this.isDisOrderFlag = false;});
			},
			cancelDel(){
				this.showAlertFlag = false;
			},
			loadOrderList(){
				let { nowPage,orderList } = this;
				this.loading = true;
				var field = { toUserId:'',status:this.payStatus,page:this.nowPage,limit:this.limit };
				getStudyBuyOrderPage(field).then(res=>{
					//console.log(res)
					nowPage += 1;
					orderList.push( ...res.data.datas );
					this.orderList = orderList;
					this.nowPage = nowPage;
					this.loading = false;
					this.isHasDataFlag = true;
				}).catch(err=>{
					//console.log(err)
					this.loading = false;
					this.isHasDataFlag=false;
				});
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.orderList = [];
				this.loadOrderList();
			},
			switchStatus(index,id){
				this.orderStaIndex = index;
				this.payStatus = id;
				this.initParams();
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	//@import url("/static/css/common/alert.scss");
	@import '@/static/css/common/alert.scss';
	.hasPaddBot{
		@include respTo(phone){
			padding-bottom: 70rpx;
		}
		@include respTo(pad){
			padding-bottom: 50rpx;
		}
	}
</style>